<div id="account-user-info">
    <div class="first-user-info">
        <div id="user-avatar">
            {{{ avatar }}}
            <a href="#change-avatar-modal" data-toggle="modal" class="btn btn-small user-avatar-change">
                {{ change_avatar }}
            </a>
        </div>
        <div>
            <h1>
                {{ real_name }}
                {{# can_change_real_name }}
                    <a href="change_realname.php" class="btn btn-small user-real-name-change">
                        {{ change_real_name }}
                    </a>
                {{/ can_change_real_name }}
            </h1>
            <span class="user-username">@{{ user_username }}</span>
        </div>
    </div>

    <table class="user-info-table">
        <tr>
            <td class="user-info-label table-label">{{ user_id_label }}</td>
            <td>{{ user_id_value }}</td>
        </tr>
        {{# can_change_password }}
            <tr>
                <td class="user-info-label table-label">{{ password_label }}</td>
                <td>
                    <a href="change_pw.php" class="btn btn-small">
                        {{ change_password }}
                    </a>
                </td>
            </tr>
        {{/ can_change_password }}
        <tr>
            <td class="user-info-label table-label">{{ user_email_label }}</td>
            <td>{{ user_email_value }} {{# can_change_email }}<a href="change_email.php" class="btn btn-small">{{ change_email }}</a>{{/ can_change_email }}</td>
        </tr>
        <tr>
            <td class="user-info-label table-label">{{ member_since_label }}</td>
            <td>{{member_since_value }}</td>
        </tr>
        <tr>
            <td class="user-info-label table-label">{{ timezone_label }}</td>
            <td>{{ timezone_value }} <a href="change_timezone.php" class="btn btn-small">{{ change_timezone }}</a></td>
        </tr>
        {{# extra_user_info }}
        <tr>
            <td class="user-info-label table-label">{{ label }}</td>
            <td>{{{ value }}} {{# can_change }}{{{ change }}}{{/ can_change }}</td>
        </tr>
        {{/ extra_user_info }}
    </table>
</div>

{{> change-avatar-modal }}
